<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
      <!-- 

        理解：它类似于将对象以展开的形式赋值给另一个空对象的感觉
       
        语法是：v-bind="需要展开的对象名"
        
        应用场景：很多的时候我们需要把对象的属性一个个的绑定在元素或者组件上，此时应采用批量绑定的方式

        注意：当v-bind的后面没有值时，是不可以简写成 " : "的





       -->
      <div :name="person.name" :age="person.age" :sex="person.sex" >v-bind的原始绑定方法</div>

      <div v-bind="person">v-bind的批量绑定方法</div>

    </div>
</body>
<script>

    Vue.config.productionTip = false; // 解决警告信息的

    const vm = new Vue({
      el: "#app",
      data() {
        return {
          person:{

            name: "豪仔",
            age: 18,
            sex: "man"



          }
         
        };
      },
    });
  </script>


</html>